/* 基础背景 */

.weather {
  position: relative;
  display: inline-block;
  width: 180px;
  height: 240px;
  /* background-image: linear-gradient(0deg, #aedcf3 0%, #36aeeb 100%); */
  background: #36aeed;
  border-radius: 8px;
}

/* ----------------------- 绘制太阳 ------------------------- */

/* content用来生成一个元素。
position、top、left、transform用来实现中心居中。
box-shadow实现外发光效果，这只是box-shadow最基本最常用的使用方式。 */

.sunny:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: #F6D963;
  border-radius: 50%;
  box-shadow: 0 0 20px #ff0;
  z-index: 2;
}

/* 绘制内六角形 */

/* 用 :after实现内六角形。
实现的关键就是使用遮罩。通过clip-path绘制一个内六角形。这就变成了一个简单的初中几何问题。
内六角形由两个等边三角形拼合而成。 */

.sunny:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -45px 0 0 -45px;
  width: 90px;
  height: 90px;
  background: #FFEB3B;
  clip-path: polygon(
    50% 0%, 65.43% 25%, 
    93.3% 25%, 78.87% 50%, 
    93.3% 75%, 64.43% 75%, 
    50% 100%, 35.57% 75%, 
    6.7% 75%, 21.13% 50%, 
    6.7% 25%, 35.57% 25%
  );
  z-index: 1;
  animation: sunScale 2s linear infinite;
}

@keyframes sunScale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* ------------------------------------ 绘制云端 ----------------------------------- */

/* 观察图形发现，有两个云朵：前面的白云和后面的乌云。
貌似需要分别用 :before和 :after实现。如果这样做的话，后续章节的雨天和雪天的雨雪元素就没有多余的伪元素可用了。
所以只能用一个伪元素实现两朵云。这里就用到了box-shadow的“影分身”了！
由于后续章节的雨天和雪天都复用了云的样式，所以写在一起了，代码如下： */

.rainy:before, .snowy:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 
  #fff 22px -15px 0 6px, 
  #fff 57px -6px 0 2px, 
  #fff 87px 4px 0 -4px, 
  #fff 33px 6px 0 6px, 
  #fff 61px 6px 0 2px, 
  #ccc 29px -23px 0 6px, 
  #ccc 64px -14px 0 2px, 
  #ccc 94px -4px 0 -4px;
}

/* 真实的元素（真身）就是一个圆。通过box-shodow来把投影作为“分身”。
先来看看box-shadow的属性： */

/* box-shadow: h-shadow v-shadow blur spread color inset;
参数详解：
h-shadow: 阴影的水平偏移量。
v-shadow: 阴影的垂直偏移量。
blur: 模糊距离(就是渐变的距离，设为0就没有渐变)。
spread: 投影的尺寸，通过这个控制“影分身”的大小。
color: 投影颜色，通过这个实现后方的乌云。
inset: 改为内阴影。这里用不到。 */

/* ------------------------------ 阴天 ----------------------------- */
/* 再给云朵加上“上下浮动”的动效 */
.cloudy:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: #eee;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 
  #eee 22px -15px 0 6px, 
  #eee 57px -6px 0 2px, 
  #eee 87px 4px 0 -4px, 
  #eee 33px 6px 0 6px, 
  #eee 61px 6px 0 2px, 
  #ccc 29px -23px 0 6px, 
  #ccc 64px -14px 0 2px, 
  #ccc 94px -4px 0 -4px;
  animation: cloudMove 2s linear infinite;
}
@keyframes cloudMove {
  0% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, -60%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
/* ------------------------------ 雨天 ----------------------------- */

.rainy:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 35%;
  width: 4px;
  height: 14px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 
  #fff 25px -10px 0, 
  #fff 50px 0 0, 
  #fff 75px -10px 0, 
  #fff 0 25px 0, 
  #fff 25px 15px 0, 
  #fff 50px 25px 0, 
  #fff 75px 15px 0, 
  #fff 0 50px 0, 
  #fff 25px 40px 0, 
  #fff 50px 50px 0, 
  #fff 75px 40px 0;
  animation: rainDrop 2s linear infinite;
}

@keyframes rainDrop {
  0% {
    transform: translate( 0, 0) rotate(10deg);
  }
  100% {
    transform: translate(-4px, 24px) rotate(10deg);
    box-shadow: 
    #fff 25px -10px 0, 
    #fff 50px 0 0, 
    #fff 75px -10px 0, 
    #fff 0 25px 0, 
    #fff 25px 15px 0, 
    #fff 50px 25px 0, 
    #fff 75px 15px 0, 
    rgba( 255, 255, 255, 0) 0 50px 0,
    rgba( 255, 255, 255, 0) 25px 40px 0, 
    rgba( 255, 255, 255, 0) 50px 50px 0, 
    rgba( 255, 255, 255, 0) 75px 40px 0;
  }
}

/* ------------------------------ 雪天 ----------------------------- */

.snowy:after {
  content: "";
  position: absolute;
  top: 60%;
  left: 35%;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 
  #fff 25px -10px 0,
  #fff 50px 0 0, 
  #fff 75px -10px 0, 
  #fff 0 25px 0, 
  #fff 25px 15px 0, 
  #fff 50px 25px 0, 
  #fff 75px 15px 0, 
  #fff 0 50px 0, 
  #fff 25px 40px 0, 
  #fff 50px 50px 0, 
  #fff 75px 40px 0;
  animation: snowDrop 2s linear infinite;
}

@keyframes snowDrop {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(25px);
    box-shadow: 
    #fff 25px -10px 0, 
    #fff 50px 0 0, 
    #fff 75px -10px 0, 
    #fff 0 25px 0, 
    #fff 25px 15px 0, 
    #fff 50px 25px 0, 
    #fff 75px 15px 0, 
    rgba( 255, 255, 255, 0) 0 50px 0, 
    rgba( 255, 255, 255, 0) 25px 40px 0, 
    rgba( 255, 255, 255, 0) 50px 50px 0, 
    rgba( 255, 255, 255, 0) 75px 40px 0;
  }
}